<template>
<div>
    <div class="vs-table-box" style="padding:20px 100px">
        <div>
            <div style="margin:20px 0">预约状态：待到店</div>
            <div style="margin:20px 0">取消原因：不想完了</div>
        </div>
        <div class="tit" style="margin-top:60px">
            顾客信息
        </div>
        <el-descriptions border :column="4" style="margin-top:20px" v-if="radio">
            <el-descriptions-item label="会员卡号">
                <el-input v-model="input4" placeholder=""></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="姓名">
                <el-input v-model="input4" placeholder=""></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="性别">
                <el-input v-model="input4" placeholder=""></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="电话">
                <el-input v-model="input4" placeholder=""></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="头围">
                <el-input v-model="input4" placeholder=""></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="前后">
                <el-input v-model="input4" placeholder=""></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="左右">
                <el-input v-model="input4" placeholder=""></el-input>
            </el-descriptions-item>
        </el-descriptions>
        <div class="tit" style="margin-top:40px">
            预约信息
        </div>
        <div>
            <el-form ref="form" :model="form" label-width="120px" label-position="left">
                <el-form-item label="预约人数">
                    <el-radio v-model="radio2" :label="1" size="mini">1人</el-radio>
                    <el-radio v-model="radio2" :label="2" size="mini">2人</el-radio>
                    <el-radio v-model="radio2" :label="3" size="mini">3人</el-radio>
                </el-form-item>
                <el-form-item label="项目名称">
                    <el-checkbox-group v-model="form.checkList">
                        <el-checkbox label="安装预约"></el-checkbox>
                        <el-checkbox label="烫发"></el-checkbox>
                        <el-checkbox label="洗剪吹"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="预计到店时间">
                    <el-date-picker v-model="form.timer" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <!-- <div class="timer_body">
                    <div v-for="(item , index) in timerList" :key="index + '1'" class="timer_info" :class="{'n_select': item.number == 3}">
                        <div>{{item.title}}</div>
                        <div>{{item.number | setNumber(item.number)}}</div>
                    </div>
                </div> -->
                 <el-form-item label="备注" >
                    <el-input type="textarea" v-model="form.desc" placeholder=""></el-input>
                </el-form-item>
            </el-form>

        </div>
        <div style="margin:20px 0">

        </div>
        <div class="vs-bottom-btns">
            <!-- <el-button @click="subitm" :loading="isBtn" type="primary" >确定</el-button> -->
            <el-button @click="utils.backPage()"  style="margin-left:100px">返回</el-button>
        </div>
    </div>
</div>
</template>

<script>
export default {
    filters: {
        setNumber(val) {
            if (Number(val) == 3) {
                return '已约满'
            } else {
                return `已预约${val}人`
            }
        }
    },
    data() {
        return {
            input4: '',
            tableData: [{}],
            radio: true,
            radio2: 1,
            keys: '',
            isBtn: false,
            loading: false,
            timerList: [{
                    title: '18:33-23:33',
                    number: 0
                },
                {
                    title: '18:33-23:33',
                    number: 1
                },
                {
                    title: '18:33-23:33',
                    number: 2
                },
                {
                    title: '18:33-23:33',
                    number: 3
                },
                {
                    title: '18:33-23:33',
                    number: 1
                },
                {
                    title: '18:33-23:33',
                    number: 1
                },
                {
                    title: '18:33-23:33',
                    number: 1
                },
                {
                    title: '18:33-23:33',
                    number: 1
                },
                {
                    title: '18:33-23:33',
                    number: 1
                },
                {
                    title: '18:33-23:33',
                    number: 1
                },
                {
                    title: '18:33-23:33',
                    number: 1
                },
                {
                    title: '18:33-23:33',
                    number: 1
                },
                {
                    title: '18:33-23:33',
                    number: 1
                },
                {
                    title: '18:33-23:33',
                    number: 1
                },
                {
                    title: '18:33-23:33',
                    number: 1
                },
            ],
            form: {
                timer: "",
                checkList: [],
                desc:'',

            },
        }
    },
    created() {
        let {
            id,
            type
        } = this.$route.query;
        if (id) {
            this.getRoom(id);
        }
    },
    methods: {
        handleChange(e, item) {
            console.log(e);
            console.log(item);
        },
        subitm() {

        },
        dialogBeforeClose() {
            this.dialogVisible = false
        }
    }
}
</script>

<style>
.disabled .el-upload--picture-card {
    display: none !important;
}
</style><style lang="scss" scoped>
:v-deep {}

.orderStatus {
    padding: 40px 40px;
    display: flex;
    align-items: center;

    .left_order_status {
        display: flex;
        align-items: center;

        >span {
            margin-left: 30px;
            font-size: 22px;
            color: red;
        }
    }

    .right_money {
        margin-left: auto;
        display: flex;
        align-items: center;

        >div {
            display: flex;
        }

        >div:first-child {
            margin-right: 40px;
            color: red;
        }
    }
}

.tit {
    margin: 20px 0;
    font-size: 16px;
    font-weight: 700;
}

.money {
    display: flex;
    flex-direction: column;

    >div {
        padding: 0 40px;
        margin-top: 10px;
        text-align: right;

    }
}

.order_info {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;

    >div {
        display: flex;
        align-items: center;

        >span {
            width: 150px;
        }
    }
}

.timer_body {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    margin: 40px 0;
    padding: 20px 40px;
    border: 1px solid rgba($color: #000000, $alpha: .1);
    border-radius: 4px;

    .timer_info {
        cursor: pointer;
        margin: 10px 33px;
        padding: 8px 0;
        width: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid rgba($color: #000000, $alpha: .1);
        border-radius: 8px;

        >div:first-child {
            font-size: 14px;
        }

        >div:last-child {
            font-size: 12px;
            margin-top: 5px;
        }

    }

    .n_select {
        cursor: not-allowed;
        background-color: rgba($color: #000000, $alpha: .2);
    }
}

.kong {
    margin: 10px 20px;
    padding: 8px 0;
    width: 120px;
}

.vs-bottom-btns {
    justify-content: left;
}
</style>
